﻿<!DOCTYPE html>
<html id="topHtml">
    <head>
        <title data-bind="text: appTitle"></title>

        <link rel="stylesheet" href="css/lib/bootstrap.min.css">
        <link rel="stylesheet" href="css/lib/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/custom.css">
    </head>

    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#" data-bind="text: appTitle"></a>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    Search:
                    <input type="text" data-bind="value: searchQuery"/>

                    Sort by:
                    <select data-bind="options: orderProps, value: orderProp"></select>
                </div>
                <div id="list" class="span10" data-bind="if: currentView() === 'list'">
                    <ul class="phones" data-bind="foreach: filteredPhones">
                        <li class="thumbnail">
                            <a class="thumb" data-bind="attr: { href: '#phones/' + id }">
                                <img data-bind="attr: { src: imageUrl }"/>
                            </a>
                            <a data-bind="attr: { href: '#phones/' + id }, text: name"></a>
                            <p data-bind="text: snippet"></p>
                        </li>
                    </ul>
                </div>
                <div id="details" class="span10" data-bind="if: currentView() === 'details'">
                    <img id="mainImage" data-bind="attr: { src: mainImageUrl }" class="phone">
                    
                    <div data-bind="with: phone">
                        <h1 data-bind="text: name"></h1>

                        <p data-bind="text: description"></p>

                        <ul class="phone-thumbs" data-bind="foreach: images">
                            <li>
                                <img data-bind="attr: { src: $data }, click: $root.setImage">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
      
        <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"> </script>
        <script type="text/javascript" src="js/lib/bootstrap.min.js"> </script>
        <script type="text/javascript" src="js/lib/knockout-2.2.1.js"> </script>
        <script type="text/javascript" src="js/lib/sammy-latest.min.js"> </script>
        <script type="text/javascript" src="js/custom.js"> </script>
    </body>
</html>